<template>
    <div style="height: 100%;width: 100%" id="body">
        <div class="top">
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>图表管理</el-breadcrumb-item>
        </el-breadcrumb>
        </div>
        <div class="chartContainer">
            <pieChart id="pie"></pieChart>
            <lineChart id="line"></lineChart>
            <barChart id="bar"></barChart>
            <earthChart id="earth"></earthChart>
        </div>
        <radarChart id="rad"></radarChart>
    </div>
</template>

<script>
    import pieChart from "../../components/chart/pieChart";
    import lineChart from "../../components/chart/lineChart";
    import barChart from "../../components/chart/barChart";
    import radarChart from "../../components/chart/radarChart";
    export default {
        name: "chartView",
        components:{
            pieChart,
            lineChart,
            barChart,
            radarChart
        }
    }
</script>

<style scoped>
    .top{
        margin-bottom: 12px;
    }
    .chartContainer{
        width: 100%;
        height: 50%;
        display: flex;
    }
    #pie{
        width: 50%;
        height: 100%;
    }
    #line{
        width: 50%;
        height: 100%;
    }
    #bar{
        width: 50%;
        height: 100%;
    }
    #rad{
        width: 100%;
        height: 45%;
    }


</style>
